.ui_logos {
    .logo_example {
        margin-bottom: 1.5em;
        
        &:last-child {
            margin: 0;
        }
        
        .logo_contain {
            display: flex;
            align-items: center;
            justify-content: center;
            background: $white;
            padding: 2em;
            box-shadow: 0 20px 30px -16px rgba($black, .2);
        }
    }
    
    @include fl-break(45em) {
        display: flex;
        justify-content: space-between;
        
        .logo_example {
            width: 31%;
            display: flex;
            flex-direction: column;
            margin: 0;
            
            .logo_contain {
                flex: 1;
            }
        }
    }
}

.ui_colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    margin: 0; padding: 0;
    
    li {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
        color: $white;
        text-align: center;
        padding: 3.5em 1em;
        box-shadow: 0 20px 30px -16px rgba($black, .2);
        
        span {
            font-size: .875em;
            font-family: $headingFont;
            font-weight: 500;
        }
        
        &.red { background: $red; }
        &.black { background: $black; }
        &.gray { background: $gray; color: $black; }
        &.light_gray { background: $light_gray; color: $black; }
        
        &.blue { background: $blue; }
        &.purple { background: $purple; }
        &.green { background: $green; }
        &.orange { background: $orange; }
        
        &.code_red { background: $code_red; }
        &.code_dark_red { background: $code_dark_red; }
        &.code_blue { background: $code_blue; }
        &.code_dark_blue { background: $code_dark_blue; }
    }
    
    @include fl-break(25em) {
        li {
            width: 45%;
        }
    }
    
    @include fl-break(35em) {
        li {
            width: 31%;
        }
    }
    
    @include fl-break(60em) {
        li {
            width: 22.5%;
        }
    }
}

.type_styles {
    * {
        margin: 0;
    }
    
    .heading {
        margin: 0 1em .5em 0;
        min-width: 7em;
    }
    
    div {
        margin-bottom: 3.5em;
    }
    
    @include fl-break(40em) {
        .heading {
            margin-bottom: 0;
        }
        
        div {
            display: flex;
            align-items: center;
        }
    }
}

.input_section {
    margin-bottom: 4.5em;
}

.btn_block {    
    .btn {
        margin-bottom: 1.25em;
    }
    
    @include fl-break(40em) {
        display: flex;
        justify-content: space-between;
        
        .btn {
            width: 45%;
        }
    }
    
    @include fl-break(60em) {
        justify-content: flex-start;
        
        .btn {
            width: 31%;
            margin-right: 3.5%;
        }    
    }
}

.inputs_block {
    .input_group {
        width: 100%;
        margin-bottom: 2em;
    }
    
    @include fl-break(40em) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        
        .input_group {
            width: 45%;
        }
    }
    
    @include fl-break(60em) {
        .input_group {
            width: 31%;
        }
    }
}